<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <input type="button" value="scrollIntoView" id="btnScroll" />
    <p id="a" class="box bold myclass">ppp</p>
    <p id="b" class="box" aaa="100" data-age="18" data-name="zjk">qqq222</p>
    <div style="height: 300px"></div>
    <span id="abc">这是span</span> -->

    <h2 id="topic">querySelector()示例</h2>
    <p>段落1</p>
    <p class="blue">段落2</p>
    <p class="blue">段落3</p>
    <p class="topic blue">段落4</p>
    <p>段落5</p>
    <div>
      <p id="p6">段落6</p>
      <p id="p7">段落7</p>
    </div>
    <script>
      //querySelecor支持很多种选择器，类似于jQuery选择器
      //选择符合条件的第一个
      // var result = document.querySelector('p')
      // //console.log(result)
      // //console.log(result.length)

      // //选择所要符合条件的元素，结果是数组
      // var result2 = document.querySelectorAll('p')
      // console.log(result2)
      // console.log(result2.length)

      // //得到所有的class为box元素
      // var result3 = document.getElementsByClassName('box')
      // //console.log(result3)

      // var result4 = document.getElementById('a')
      // result4.classList.forEach(function (value, key, ele) {
      //   //console.log(value)
      // })

      // result4.classList.remove('myclass')
      // result4.classList.add('myclass2')
      // result4.classList.add('box')
      // result4.classList.add('myclass3')

      // //console.log(result4)

      // var result5 = document.getElementById('b')

      // var x = result5.dataset.age
      // var y = result5.dataset.name
      // //console.log(x)
      // //console.log(y)

      // var btn = document.getElementById('btnScroll')
      // btn.addEventListener('click', function () {
      //   alert('xx')
      //   var abcSpan = document.getElementById('abc')
      //   abcSpan.scrollIntoView()
      // })

      //获取id为topic的元素
      var topic = document.querySelector('#topic')
      console.log(topic.innerHTML)

      //获得第一个p标签元素
      var p = document.querySelector('p')
      console.log(p)

      //获得第一个类含有blue的元素
      var blue = document.querySelector('.blue')
      console.log(blue.innerHTML)

      //获得类含topic的第一个p元素
      var ptopic = document.querySelector('p.topic')
      console.log(ptopic.innerHTML)

      //获得第一个标签为div元素，在该元素中查找第一个子元素Id为p7的元素
      var divp7 = document.querySelector('div').querySelector('#p7')
      console.log(divp7.innerHTML)
    </script>
  </body>
</html>
